import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  TextInput,
  Text
} from 'react-native'

import NavBar from '../../../../components/PublicHeader';
import Layer from '../../../../utils/Layer';

export default class editingShowPhone extends Component {
  constructor(props) {
    super(props)
    const {
      showPhone
    } = this.props.navigation.state.params
    this.state = {
      topTitle: "编辑电话", // 头部标题
      titleColor: "#333", // 标题颜色
      showPhone: null, // 电话
      rightText: "完成", // 右边完成按钮
      showPhone: showPhone, // 原本的电话
      promptPhone: false
    };
  }

  componentDidMount = () => { }
  //  编辑保存方法
  uploadShowPhone = () => {
    if (this.state.showPhone != '') {
      const {
        showPhone
      } = this.state
      // var p = /^1[3-9]\d{9}$/
      // if (p.test(showPhone)) {
      this.props.navigation.state.params.refresh(this.state.showPhone)
      this.props.navigation.goBack()// 返回上一级
      // } else {
      //   Layer.showMsg('手机号格式不正确')
      //   return
      // }

    } else {
      Layer.showMsg('电话不能为空')
      return
    }
  }
  // 电话 修改方法
  onChangeText = (inputText) => {
    this.setState({
      showPhone: inputText
    })
  }
  // 手机号校验逻辑
  // phoneBlur() {
  //   const {
  //     showPhone
  //   } = this.state
  //   var p = /^1[3-9]\d{9}$/
  //   if (p.test(showPhone)) {

  //   } else {
  //     Layer.showMsg('手机号格式不正确')
  //     return
  //   }
  // }

  render() {
    return (
      <View style={styles.warperShowPhone}>
        {/* 导航栏 */}
        <NavBar
          navigation={this.props.navigation}
          title={this.state.topTitle}
          titleColor={this.state.titleColor}
          right={this.state.rightText}
          pressRight={() => {
            this.uploadShowPhone() // 完成 保存
          }}
        />
        <View style={styles.showPhone}>
          {/* 昵称 */}
          <View style={styles.showPhoneBox}>
            <TextInput
              onChangeText={inputText => this.onChangeText(inputText)}
              value={this.state.showPhone}
              placeholder='请输入你要修改的电话'
              // onBlur={() => this.phoneBlur()}
              style={styles.showPhoneInput} />
          </View>
          {/* 文本提示 输入格式 */}
          <Text style={styles.formatTips}>请输入你要修改的电话</Text>
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  warperShowPhone: {
    flex: 1,
    backgroundColor: "rgba(240,240,240,0.3)",
  },

  showPhoneBox: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    marginTop: 20,
    width: "100%",
    backgroundColor: "#fff"
  },
  showPhoneInput: {
    borderWidth: 0,
    width: "100%",
    paddingLeft: 15
  },
  formatTips: {
    fontSize: 14,
    color: "#999",
    padding: 15
  },
  promptText: {
    color: "red",
    fontSize: 15,
  },
})